<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="file" id="file">
  <img alt="加载中" id="src" width="200" height="200">
  <video src="http://localhost:4000/video" width="200" height="200" controls></video>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
  <script>
    var file = document.getElementById('file')
    file.onchange = function (e) {
      var img = document.getElementById('src')
      var base = new FileReader()
      console.log(e.target.files[0])
      var all = e.target.files[0]
      var size = e.target.files[0].size / 10
      var init = 0
      var arr = []
      var index = 0
      while (init < e.target.files[0].size) {
        arr.push(all.slice(init, init + size))
        init = init + size
      }
      console.log(arr)
      arr.map((res, index) => {
        const form = new FormData()
        form.append('file', res)
        axios({
          url: 'http://localhost:4000/upla?name=' + index + '&size=' + 9,
          method: 'post',
          data: form
        }).then(res => {
          console.log(res)
          if (res.data.ok === 200) {
            axios({
              url: 'http://localhost:4000/merge?name=' + e.target.files[0].name,
              method: 'get'
            }).then(suc => {
              console.log(suc)
              img.setAttribute('src', suc.data.url)
            })
          }
        })
      })
      // ----------------------------
      // var name = e.target.files[0].name
      // var type = e.target.files[0].type
      // base.readAsDataURL(new Blob([e.target.files[0]]))
      // base.onload = function (e) { 
      //   const base64 = atob(e.target.result.split(',')[1])
      //   const buffer = new ArrayBuffer(base64.length) // 创建缓存视图
      //   const u8 = new Uint8Array(buffer) // 将缓存视图 赋值 字节流数组 来 创建一个模板数组
      //   for(let i =0;i<=base64.length-1;i++) {
      //     u8[i] = base64.charCodeAt(i)
      //   }
      //   // console.log(u8)
      //   // console.log(new Blob([u8],{type: 'image/jpg'}))
      //-----------------------------------base64转化blob
      //   // const u8 = new Uint8Array(base64.length) // 将缓存视图 赋值 字节流数组 来 创建一个模板数组
      //   // for (let i = base64.length - 1; i >= 0; i--) {
      //   //   u8[i] = base64.charCodeAt(i)
      //   // }

      //   console.log(u8)
      //   const fil = new File([u8], name, { 
      // [Uint8Array]是格式必须
      //     type: type
      //   })
      //   console.log(fil)
      //----------------------------------base64转化文件对象
      //   const from = new FormData()
      //   from.append('file', fil)
      //   // axios({
      //   //   url: 'http://localhost:4000/upla',
      //   //   method: 'post',
      //   //   data: from
      //   // }).then(res => {
      //   //   console.log(res)
      //   // })
      // }
    }
  </script>
</body>

</html>